<template>
  <div class="comp-container"
    layout>

    <core-aside class="comp-container__aside"/>

    <div class="comp-container__page"
      flex layout="column" layout-align="start start">
      <core-header class="comp-container__header"/>

      <core-history-page></core-history-page>
      
      <div class="comp-container__main"
        ref="container"
        flex>
        <slot></slot>
      </div>
    </div>

  </div>
</template>

<script>
import CoreHeader from 'components/core/header'
import CoreAside from 'components/core/aside'
import CoreHistoryPage from 'components/core/history-page'

import { hasClass, addClass, removeClass } from 'services/Util'
import { mapState } from 'vuex'

export default {
  name: 'CompContainer',
  components: { CoreHeader, CoreAside, CoreHistoryPage },
  methods: {
    setContainerClass () {
      setTimeout(() => {
        const el = this.el
        if (!el) return
        let childHeight = 0
        // 计算dom的子元素的所有高度
        Array.from(el.children).forEach(childEl => {
          childHeight += childEl.clientHeight
        })
        const paginationHeight = 52
        const hasContainerClass = hasClass(el, 'gl-table-container')
        childHeight = hasContainerClass ? childHeight + paginationHeight : childHeight
        if (el.offsetHeight < childHeight) {
          addClass(el, 'gl-table-container')
        } else {
          removeClass(el, 'gl-table-container')
        }
      }, 20)
    }
  },
  computed: {
    ...mapState([ 'ApiComplete', 'RouteComplete' ]),
    el () { return this.$refs.container }
  },
  watch: {
    ApiComplete () {
      this.setContainerClass()
    },
    RouteComplete () {
      this.setContainerClass()
    }
  },
  mounted () {
    window.addEventListener('resize', this.setContainerClass.bind(this))
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.setContainerClass.bind(this))
  }
}
</script>

<style lang="scss">
@import "src/styles/config/components.scss";

@include b(container) {
  height: 100%;

  @include e(page) {
    overflow: hidden;

    @include e(main) {
      width: 100%;
      // 60px header; 30px history
      height: calc(100% - 60px - 30px);
      overflow: auto;
      padding: $--padding-base * 4;
      // padding-bottom: $--padding-base * 2;
      transition: padding $--base-transition;
      @include layout(('md', 'sm')) { padding: $--padding-base * 2.5; padding-bottom: $--padding-base * 1.2; }
      @include layout('xs') { padding: $--padding-base; padding-bottom: $--padding-base * 0.5; }

      // & > div {
      //   min-height: 100%;
      // }
    }
  }

}
</style>
